<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <span>
          <b class="u-f-16">产品知识培训列表</b>
        </span>
        <router-link :to="{name:'agencyEdit'}" v-if="hasPerm('agencyEdit')">
          <el-button
            type="danger"
            size="small"
            icon="el-icon-plus"
            class="u-right u-5mt"
            round
          >添加产品知识培训</el-button>
        </router-link>
      </div>

      <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
        <el-form-item label="启用状态">
          <el-select v-model="queryForm.status" clearable>
            <el-option label="全部" value></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="未启用" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="代理商名称">
          <el-input v-model="queryForm.keyword" placeholder="输入代理商名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" class="u-mt-10" v-viewer>
        <el-table-column label="id" prop="id" width="100"></el-table-column>
        <el-table-column label="代理商图片">
          <template slot-scope="scope">
            <el-image
              style="max-width:80px"
              :src="scope.row.agency_img"
              :data-src="scope.row.agency_img"
              fit="cover"
              lazy
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column label="代理商名称" prop="agency_title"></el-table-column>

        <el-table-column label="代理商个人姓名" prop="agency_name"></el-table-column>

        <el-table-column label="代理商账号" prop="agency_login_username"></el-table-column>
        <el-table-column label="范围（Km）" prop="agency_range"></el-table-column>

        <el-table-column label="是否启用">
          <template slot-scope="scope" v-if="hasPerm('agencyStatusBtn')">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              active-color="#13ce66"
              @change="handleStatus(scope.row.id,scope.row.status)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="代理商地址">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.agency_province }}-{{ scope.row.agency_city }}-{{ scope.row.agency_county }}</el-tag>
            <br />
            <el-tag>详细地址:{{ scope.row.agency_detail_address }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="添加日期" prop="create_time" sortable></el-table-column>

        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="handleRoute(scope.row.id,'agencyEdit')"
                  v-if="hasPerm('agencyEdit')"
                >
                  <el-button size="mini" type="text">编辑</el-button>
                </el-dropdown-item>

                <el-dropdown-item
                  @click.native="handleRoute(scope.row.id,'agencyEarnings')"
                  v-if="hasPerm('agencyEarnings')"
                >
                  <el-button size="mini" type="text">收益信息</el-button>
                </el-dropdown-item>
                 <el-dropdown-item
                  @click.native="handleRoute(scope.row.id,'agencyOrderList')"
                  v-if="hasPerm('agencyOrderList')"
                >
                  <el-button size="mini" type="text">订单列表</el-button>
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="handleRoute(scope.row.id,'agencyUser')"
                  v-if="hasPerm('agencyUser')"
                >
                  <el-button size="mini" type="text">代理用户</el-button>
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="handleRoute(scope.row.id,'agencyGoodsIndex')"
                  v-if="hasPerm('agencyGoodsIndex')"
                >
                  <el-button size="mini" type="text">商品管理</el-button>
                </el-dropdown-item>

                <el-dropdown-item
                  @click.native="handlePassword(scope.row.id)"
                  v-if="hasPerm('agencyPassBtn')"
                >
                  <el-button size="mini" type="text">密码修改</el-button>
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="handleDelete(scope.row.id)"
                  v-if="hasPerm('agencyDelBtn')"
                >
                  <el-button size="mini" type="text">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="u-mt-20 u-text-center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="pass_info.password"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditPassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonPage from "@/mixins/common-page";
export default {
  mixins: [commonPage],
  data() {
    return {
      apiName: "agency",
      queryForm: {
        status: "",
        keyword: ""
      },
      dialogVisible: false,
      pass_info: {
        id: "",
        password: ""
      }
    };
  },
  methods: {
    handlePassword(id) {
      this.dialogVisible = true;
      this.pass_info.id = id;
    },
    confirmEditPassword() {
      //确认修改密码

      this.$confirm("确认修改密吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api[this.apiName].editpwd(this.pass_info).then(response => {
            if (response.code == 1) {
              this.dialogVisible = !this.dialogVisible; //关闭输入框
              this.$message({
                type: "success",
                message: "修改成功!"
              });
              this.onLoad();
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>
